<script setup lang='ts'>

</script>

<template>
    <div class="header">
        <!-- 占位 名字是header -->
        <slot name="header"></slot>
    </div>
    <div class="body">
        <!-- 占位标签 -->
        <slot>
            <!-- 当没有内容传入的时候会生效 -->
            <h1>我是默认内容</h1>
        </slot>
        <slot name="body"></slot>
    </div>
    <div class="footer">
        <slot name="footer"></slot>
    </div>
</template>

<style scoped>
.header,
.body,
.footer {
    width: 100%;
    height: 200px;
    background-color: purple;
}
.body {
    height: 600px;
    background-color: gold;
    overflow-y: auto;
}
</style>